<template>
    <div class="page">
        <!-- top-nav -->
        <div class="home-menu">
            <div class="container">

                <a :class="{ active: activeIndex == index }" v-for="(item, index) in secondCate" :key="index" @click="_cateHandelClick(item.id)">{{ item.cate_name }}</a>
            </div>
        </div>
        <!-- <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>分类</el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <!-- slide -->
        <div class="index-top container td-fss">
            <!-- <div class="left">
                <div class="good-cate">商品分类</div>
                <ul class="left-menu">
                    <li v-for="(item, index) in secondCate" :key="index" @click="_cateHandelClick(item.id)">
                        <a class="a" :class="{on: item.id == where.sid}">{{ item.cate_name }}</a>
                    </li>
                </ul>
            </div> -->
            <div class="right td-f1">
                <div class="goodsList" ref="goodsList">
                    <div class="top-filter td-fbc">
                        <div class="filter td-fsc">
                            <!-- <span :class="{ active: stock === 0 && price === 0 && !nows }" @click="set_where(0)">默认</span> -->
                            <span :class="{ active: price }" @click="set_where(1)">
                                价格
                                <img :src="$global.Image.sort_horn" v-if="price === 0" />
                                <img :src="$global.Image.sort_up" v-if="price === 1" />
                                <img :src="$global.Image.sort_down" v-if="price === 2" />
                            </span>
                            <span :class="{ active: stock }" @click="set_where(2)">
                                销量
                                <img :src="$global.Image.sort_horn" v-if="stock === 0" />
                                <img :src="$global.Image.sort_up" v-if="stock === 1" />
                                <img :src="$global.Image.sort_down" v-if="stock === 2" />
                            </span>
                            <span :class="{ active: nows }" @click="set_where(3)">新品</span>
                        </div>
                        <!-- <div class="search">
                            <el-select v-model="where.sid" size="small" placeholder="请选择" @change="_getCategoryGoods">
                                <el-option v-for="item in selectCate" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </div> -->
                    </div>
                    <ul class="list">
                        <li v-for="(item, index) in productList" :key="index">
                            <div class="goods-box" @click="_goGoodsDetail(item)">
                                <img class="goods-img" :src="item.image" @click="_goGoodsDetail(item)" />
                                <div class="goods-name ellipsis" :title="item.store_name">{{ item.store_name }}</div>
                                <div class="goods-price td-fbc">
                                    <span>¥{{ item.price }}</span>
                                    <img :src="$global.Image.icon_cart" @click.stop="_showGoodsInfo(item)" />
                                </div>
                            </div>
                        </li>
                        <div class="nodata" v-if="productList.length == 0">
                            <img :src="$global.Image.noGood" />
                        </div>
                    </ul>
                    <div class="pagination-box">
                        <el-pagination background layout="prev, pager, next" @current-change="_handelClickPage" :page-size="where.limit" :total="count"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- add cart -->
        <v-add-cart ref="addCart"></v-add-cart>
    </div>
</template>

<script>
import { getPcHomeData } from "@api/public";
import { getCategory } from "@api/store";
import { formatSelectData } from "@utils/format";
import { getProducts } from "@api/store";
import addCart from "@components/addCart";

export default {
    components: {
        "v-add-cart": addCart,
    },
    data() {
        return {
            category: [], // 首页分类
            activeIndex: 0, // 当前首页分类索引
            activeCate: {}, // 单签收页分类
            secondCate: [], // 当前二级分类
            selectCate: [], // 首页分类选择
            productList: [], // 产品列表
            where: {
                // 筛选
                page: 1,
                limit: 20,
                keyword: "",
                cid: 0, //一级分类id
                sid: 0, //二级分类id
                news: 0,
                priceOrder: "",
                salesOrder: "",
            },
            count: 0, // 总条数
            price: 0,
            stock: 0,
            nows: false,
            timer: null,
            timerNum: 0,
        };
    },
    created() {
        let cIndex = localStorage.getItem("cIndex");
        let sid = localStorage.getItem("sid");
        if (cIndex) this.activeIndex = cIndex;
        else this.activeIndex = 0;
        if (sid) this.where.sid = parseInt(sid);
        else this.where.sid = 0;
    },
    mounted() {
        this.loadCategoryData();
    },
    methods: {
        loadCategoryData() {
            getCategory().then((res) => {
                this.category = res.data;
                this._changeCategory(this.activeIndex);
            });
        },
        _changeCategory(val, type) {
            if (type == "click") {
                this.where.sid = 0;
            }
            this.activeIndex = val;
            this.activeCate = this.category[this.activeIndex];
            this.where.cid = this.activeCate.id;
            this.secondCate = this.category[this.activeIndex].children;
            this.selectCate = formatSelectData(
                this.secondCate,
                "id",
                "cate_name",
                true
            );
            this._getCategoryGoods();
        },
        //点击事件处理
        _cateHandelClick(id) {
            this.where.sid = id;
            this._getCategoryGoods();
        },
        set_where(index) {
            let that = this;
            switch (index) {
                case 0:
                    that.price = 0;
                    that.stock = 0;
                    that.nows = false;
                    break;
                case 1:
                    if (that.price === 0) that.price = 1;
                    else if (that.price === 1) that.price = 2;
                    else if (that.price === 2) that.price = 0;
                    that.stock = 0;
                    break;
                case 2:
                    if (that.stock === 0) that.stock = 1;
                    else if (that.stock === 1) that.stock = 2;
                    else if (that.stock === 2) that.stock = 0;
                    that.price = 0;
                    break;
                case 3:
                    that.nows = !that.nows;
                    break;
                default:
                    break;
            }
            that.$set(that, "productList", []);
            that.where.page = 1;
            that._getCategoryGoods();
        },
        //设置where条件
        setWhere() {
            let that = this;
            if (that.price === 0) {
                that.where.priceOrder = "";
            } else if (that.price === 1) {
                that.where.priceOrder = "asc";
            } else if (that.price === 2) {
                that.where.priceOrder = "desc";
            }
            if (that.stock === 0) {
                that.where.salesOrder = "";
            } else if (that.stock === 1) {
                that.where.salesOrder = "asc";
            } else if (that.stock === 2) {
                that.where.salesOrder = "desc";
            }
            that.where.news = that.nows ? "1" : "0";
        },
        // 获取产品
        _getCategoryGoods() {
            this.setWhere();
            let q = this.where;
            getProducts(q).then((res) => {
                this.productList = res.data || [];
                this.count = res.count;
            });
        },
        // 分页
        _handelClickPage(val) {
            this.where.page = val;
            this._getCategoryGoods();
        },
        // 进入商品详情
        _goGoodsDetail(item) {
            localStorage.setItem("cIndex", this.activeIndex);
            localStorage.setItem("sid", this.where.sid);
            this.$router.push("/detail/" + item.id);
        },
        // 显示商品信息
        _showGoodsInfo(item) {
            this.$refs.addCart.show(item.id);
        },
    },
};
</script>

<style scoped  lang="scss" scoped>
.home-menu {
    font-size: 18px;
    border-bottom: solid #eee 1px;
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.15);
    .container {
        display: flex;
        a {
            display: block;
            color: #333;
            margin-left: 30px;
            font-weight: bold;
            padding: 22px 0;
        }
        a:hover {
            color: #da213d;
        }
        .active {
            font-size: 18px;
            color: #da213d;
            font-weight: bold;
        }
    }
}

// index-top
.index-top {
    overflow: hidden;
    .left {
        width: 260px;
        .good-cate {
            width: 260px;
            height: 70px;
            background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            color: #ffffff;
            line-height: 70px;
            text-shadow: 0px 0px 4px #00000080;
        }
        .type-name {
            height: 60px;
            font-size: 18px;
            border: 1px solid #da213d;
            span {
                padding-left: 6px;
                color: #da213d;
            }
            img {
                display: block;
                width: 25px;
                height: 25px;
            }
        }
        .left-menu {
            // margin-top: 40px;
            border: 1px solid #efc2c1;
            li {
                text-align: center;
                line-height: 60px;
                font-size: 16px;
                cursor: pointer;
                background: #faf5f5;
                a {
                    width: 258px;
                    height: 60px;
                    color: #333;
                    display: block;
                    position: relative;
                    &::before{
                      position: absolute;
                      left: 18px;
                      right: 17px;
                      top: 0;
                      border-top: 1px dashed #dbdbdb;
                      content: '';
                    }
                }
                a:hover {
                    color: #333333 !important;
                    background: #fff;
                    &::before{
                      border-top: 0;
                    }
                }
                .on {
                    color: #333333;
                    background: #fff;
                    &::before{
                      border-top: 0;
                    }
                }
            }
            .li:hover {
            }
        }
    }
    .right {
        margin-top: 20px;
        margin-left: 20px;
        width: 950px;
    }
}

// preferential
.preferential {
    margin-top: 40px;
    .tit {
        font-size: 18px;
        font-weight: 700;
        color: #333333;
        .more {
            font-size: 14px;
            color: #999;
            font-weight: normal;
            cursor: pointer;
        }
    }
    ul {
        margin-top: 20px;
        li {
            width: 470px;
            text-align: center;
            img {
                display: block;
                width: 100%;
                height: 225px;
            }
            .name {
                font-size: 16px;
                font-weight: 600;
                color: #666;
                margin-top: 10px;
            }
            .desc {
                font-size: 14px;
                color: #999;
                margin-top: 10px;
            }
        }
    }
}

// goods list
.goodsList {
    .top-filter {
        padding: 0 20px 0 40px;
        height: 60px;
        border: solid #eee 1px;
        box-shadow: 0 5px 10px rgba($color: #000000, $alpha: 0.1);
        .filter {
            font-size: 14px;
            color: #999;
            span {
                font-size: 14px;
                display: inline-block;
                margin-right: 40px;
                cursor: pointer;
                display: flex;
                align-items: center;
                width: 80px;
                img {
                    height: 14px;
                    margin-left: 4px;
                }
            }
            span:hover {
                color: #da213d;
            }
            .active {
                color: #da213d;
            }
        }
    }
    .list {
        margin-top: 20px;
        overflow: hidden;
        min-height: 410px;
        border-top: solid #eee 1px;
        li {
            float: left;
            width: 33.333333%;
            margin-bottom: 50px;
            box-sizing: border-box;
            border: solid #eee 1px;
            padding: 0 0 20px;
            .goods-box {
                cursor: pointer;
                width: 100%;
                .goods-img {
                    width: 100%;
                    height: 301px;
                    display: block;
                    cursor: pointer;
                    object-fit: cover;
                }
                .goods-name {
                    margin-left: 15px;
                    margin-right: 15px;
                    font-size: 16px;
                    color: #333;
                    height: 30px;
                    line-height: 30px;
                    margin-top: 10px;
                    cursor: pointer;
                }
                .goods-price {
                    margin-top: 10px;
                    margin-left: 15px;
                    margin-right: 15px;
                    span {
                        font-size: 16px;
                        font-weight: 600;
                        color: #da213d;
                    }
                    img {
                        display: block;
                        width: 23px;
                        height: 23px;
                        cursor: pointer;
                    }
                }
            }
        }
        li:hover {
            background-color: #fff;
        }
     
    }
}
</style>
